<template>
	<div class="baseinfo-container">
		<div class="infoContainer" id="infoContainer" v-if="position.lon">
			<p>
				{{ transLon }}经&nbsp;&nbsp;
				<span v-if="shouDegree">{{ position.lon.slice(0, position.lon.length - 1) }}</span>
				<span v-else>{{ lonNum }}</span>
			</p>
			<p>
				{{ transLat }}纬&nbsp;&nbsp;
				<span v-if="shouDegree">{{ position.lat.slice(0, position.lat.length - 1) }}</span>
				<span v-else>{{ latNum }}</span>
			</p>
			<p>
				海拔
				<span>{{ position.height.slice(0, position.height.length - 1) }}</span>
				米
			</p>
			<p>
				视角海拔高度
				<span>{{ position.viewHeight.slice(0, position.viewHeight.length - 2) }}</span>
				{{ /k/g.test(position.viewHeight) ? '千米' : '米' }}
			</p>
			<!-- <p>{{ lonNum }}</p> -->
			<el-switch v-model="shouDegree" active-text="度分秒"> </el-switch>
		</div>
	</div>
</template>

<script>
import { DegreeConvertBack } from '@/earth/utils'
export default {
	name: 'baseInfo',
	data: function () {
		return {
			position: {},
			shouDegree: true
		}
	},
	mounted: function () {
		this.position = Cesium.C_getPickPosition(viewer)
	},
	computed: {
		transLon: function () {
			return /E/g.test(this.position.lon) ? '东' : '西'
		},
		transLat: function () {
			return /N/g.test(this.position.lat) ? '北' : '南'
		},
		lonNum: function () {
			return DegreeConvertBack(this.position.lon)
		},
		latNum: function () {
			return DegreeConvertBack(this.position.lat)
		}
	}
}
</script>

<style lang="scss" scoped >
.baseinfo-container {
	position: fixed;
	right: 0;
	bottom: 0;
	line-height: 1.6vw;
	background: linear-gradient(to right, rgba(20, 62, 141, 0), rgba(20, 62, 141, 0.75));
	width: 49vw;
	.infoContainer {
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		font-size: 1.5vh;
		float: right;
	}
	.infoContainer > p {
		color: white;
		margin-right: 1vw;
	}
	.infoContainer > p > span {
		color: yellow;
	}
	p,
	span {
		margin-top: 0px;
		margin-bottom: 0px;
	}
	/deep/ .el-switch {
		line-height: 18px;
		height: 30px;
		.el-switch__label {
			color: #fff;
		}
		.el-switch__label.is-active {
			color: #409eff;
		}
	}
}
</style>
